﻿@model HomeCareLibrary.Models.ArticlesModel

@if (Model != null)
{

    ViewBag.Title = "Article";
    ViewBag.Description = Model.article_meta_desc;
    ViewBag.Keywords = Model.article_meta_key;
}
<div class="col-lg-9 col-sm-9 right_part">
    <div class="title clearfix">
        <h1>Home Care Library</h1>
        <div class="head-searchbox">
            <button type="submit" class="search_go"></button>
            <input type="text" placeholder="Search" id="Search" class="form-control">
        </div>
        <div id="accordion" class="panel-group library-accordion">
            <div class="panel panel-default">
                <div class="panel-heading1">
                    <div id='flyout_menu'>
                        <h4 class="panel-title library ">
                            @Html.Action("menu", "Home")
                        </h4>
                    </div>
                </div>

            </div>
        </div>
    </div>
    @if (Model != null)
    {
        <h3 style="display:none;"  id="heading1" class="head-tittle">@Model.Feature_name</h3>
        <div  class="media_tab">
            <ul style="display:none;" class="nav nav-tabs" id="myTab">
                <li><a class="overview_icon ui-link aOverview" id="aOverview" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0);"></a></li>
                <li><a class="routine_icon ui-link" id="aCare" href="javascript:void(0);" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.rc_task_content.Trim().Replace(" ", "-").ToLower()"></a></li>
                <li ><a class="q_a_icon ui-link" id="aQuestions" href="javascript:void(0)" data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" data-task="@Model.qa_topic.Trim().Replace(" ", "-").ToLower()"></a></li>
                <li class="active"><a class="articles_icon ui-link" id="aArticles"  data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0)"></a></li>
            </ul>
        </div>
        <div class="main-content" id="myTabContent">
            <div class="main-content-inn">
                <div class="articles_4">
                    <div class="article_page">
                        <div class="media_rc media_artical white-box ">
                            <div class="checklist_part checklist_part3">
                                <span class="in_title marginTitle">@Model.article_title</span>
                                <br>
                                <div class="data_main">
                                    <div class="middle_part">
                                        <div class="clearfix">
                                            <div class="left-img">
                                                <img class="img-responsive" src="@Model.article_big_image" alt="@Model.article_big_image">
                                            </div>
                                            <p>@(Html.Raw(Model.article_bottom_content))</p>
                                            <span class="checklist-img">
                                                @{ Html.RenderPartial("google-link-unit-2"); }
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div></div>
                            <div class="media_rc add_img text-center">
                                @*@{ Html.RenderPartial("google-ad-unit-wide-2"); }*@
                            </div>
                            <h3 class="media_artical-head">Related Articles . . . </h3>
                            @foreach (var item in Model.listArtical)
                            {
                                <div class="media_artical media_rc media">
                                    <a class="pull-left ui-link" href="#">
                                        <img alt="" class="media-object" src="@item.article_small_image_icon"></a>
                                    <div class="media-body">
                                        <h4 class="media-heading">@item.article_title</h4>
                                        <span class="media-data">@Html.Raw(item.article_summary)</span>
                                        <span class="media-more">
                                            <a   data-name="@Model.Feature_name.Trim().Replace(" ", "-").ToLower()" href="javascript:void(0)" data-task ="@item.article_title.Trim().Replace(" ", "-")" class="ui-link articles">more <small>&#9654;</small></a>
                                        </span>
                                    </div>
                                </div>
                            }
                            <div class="media_rc add_img text-center">
                               @* @{ Html.RenderPartial("google-ad-unit-wide-2"); }*@
                            </div>
                        
                    </div>
                </div></div>
                <div class="title_btm">
                    <h2>Home Care Library</h2>
                    <div class="head-searchbox">
                        <button type="submit" class="search_go"></button>
                        <input type="text" placeholder="Search" id="Search" class="form-control">
                    </div>
                    <div class="panel-title library ">
                        <a class="accordion-toggle collapsed" href="@Url.Action("Index", "Home")">
                            <img src="@Url.Content("~/images/explore-library.png")" class="img-responsive">
                        </a>
                    </div>
                </div>
            
        </div>
    }
</div>
<script>
    $(".aOverview").live("click", function () {
        $("#myTab").show();
        $("#heading1").show();
        var ID = $(this).attr("data-name");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/overview");
        document.title = "Overview";
        jQuery.ajax({
            url: "@Url.Action("overview", "Home")", type: "POST", traditional: true,
            data: { 'id': ID },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
            }
        })
    });
    $("#aCare").live("click", function () {
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/care/" + task);
        document.title = "Routine";
        jQuery.ajax({
            url: "@Url.Action("care", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
            }
        })

    });
    $(".care").live("click", function () {
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/care/" + task);
        document.title = "Routine";
        jQuery.ajax({
            url: "@Url.Action("care", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
            }
        })
    });
    $("#aQuestions").live("click", function () {
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/questions/" + task);
        document.title = "Questions";
        jQuery.ajax({
            url: "@Url.Action("questions", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
            }
        })
    });
    $(".questions").live("click", function () {
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/questions/" + task);
        document.title = "Questions";
        jQuery.ajax({
            url: "@Url.Action("questions", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
            }
        })
    });
    $("#aArticles").live("click", function () {
        var ID = $(this).attr("data-name");
        var str = ID.replace(/\-/g, ' ').toLowerCase().replace(/\b[a-z]/g, function (letter) {
            return letter.toUpperCase();
        });
        alert(str);
        $("#heading1").html(str);
        window.history.pushState("", "Title", "/" + ID + "/articles/");
        document.title = "Articles";
        jQuery.ajax({
            url: "@Url.Action("articles", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': ""},
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
            }
        })
    });
    $(".articles").live("click", function () {
        $("#myTab").hide();
        $("#heading1").hide();
        var ID = $(this).attr("data-name");
        var task = $(this).attr("data-task");
      
        
        window.history.pushState("", "Title", "/" + ID + "/articles/" + task);
        document.title = "Articles";
        jQuery.ajax({
            url: "@Url.Action("articles", "Home")", type: "POST", traditional: true,
            data: { 'id': ID, 'featureID': task },
            success: function (data) {
                jQuery('#myTabContent').html('')
                jQuery("#myTabContent").html(data);
                $("#heading2").html(str);
            }
        })
    });

</script>